<template>
  <div class="home">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>系统信息</span>
      </div>
      <div class="text item">
        <!-- 提示信息 -->
        <el-alert title="商品总数: 500, 已销售总金额: 998.00, 库存商品总价: 9800.00" type="info" show-icon></el-alert>
        <!-- 导入数据 -->
        <el-alert title="导入数据" type="success" show-icon></el-alert>
        <!-- 左右卡片 -->
        <el-row :gutter="20">
          <!-- 左 -->
          <el-col :span="12">
            <!-- 左侧卡片 -->
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>销售排行</span>
              </div>
              <div class="text item">
                <!-- 左侧表格 -->
                <el-table :data="saleData" stripe style="width: 100%">
                  <!-- 商品名称 -->
                  <el-table-column prop="gName" label="商品名称"></el-table-column>
                  <!-- 销量 -->
                  <el-table-column prop="saleNum" label="销量"></el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
          <!-- 右 -->
          <el-col :span="12">
            <!-- 右侧卡片 -->
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>缺货的商品</span>
              </div>
              <div class="text item">
                <!-- 右侧表格 -->
                <el-table :data="stockoutData" stripe style="width: 100%">
                  <!-- 商品名称 -->
                  <el-table-column prop="gName" label="商品名称"></el-table-column>
                  <!-- 库存 -->
                  <el-table-column prop="curNum" label="库存"></el-table-column>
                  <!-- 操作 -->
                  <el-table-column prop="saleCount" label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" size="small">入库</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 销量排行数据
      saleData: [

      ],
      // 缺货商品数据
      stockoutData: [

      ]
    };
  },
    created(){
        this.queryStock();
        this.queryMax()
    },
    methods:{
      queryStock(){
        this.$axios
        .get(
            "goods/warn",
        )
        .then(response => {

            this.stockoutData=response.data;
            // console.log(response.data)
            //设置getTotal
        })
      },
        queryMax(){
            this.$axios
                .get(
                    "goods/max",
                )
                .then(response => {

                    this.saleData=response.data;
                    console.log(response.data)
                    //设置getTotal
                })
        }
    }
};
</script>
<style lang="less">
.home {
  .el-card {
    .el-card__header {
      font-size: 20px;
      font-weight: 600;
      background-color: #f1f1f1;
      color:#333333;
    }
    .el-card__body {
      .item {
        .el-alert {
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>

